<template>
  <div class="tabber">
<div class="box"   @click="handleCilck(index)" :class="{active:currentIndex==index}"  v-for="(item,index) in tabber " :key="index">
{{item.name}}
</div>
  </div>
</template>

<script>
export default {
data(){
    return {
        currentIndex:"",
tabber:[{pic:"",name:"首页"},
{pic:"",name:"订单"},
{pic:"",name:"我的"}
]
    }
},
methods:{
    handleCilck(index){
this.currentIndex=index
    }
}
}
</script>

<style>
.tabber{
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    height: 60px;
    width: 100%;
}
.box{
    text-align: center;
    line-height: 60px;
    width: 100%;
    border-top: 1px solid #bbb9b9;
    background-color: white;
}
.active{
    color: skyblue;
}
</style>